<template>
  <div class="statistics">
    <head-top head-title="投票统计" hidden='true' go-back="true"></head-top>
    <p v-if="status === 1 && code === 400" style="padding:200px 10px 0px 10px; text-align: center; font-size:16px">
      {{errMessage}}</p>
    <ul class="vote-list" v-if="status === 1">
      <li class="list" v-for="(item,index) in staListData" :key="index">
        <div class="line">
          <!--<mt-cell is-link :to="`/my/StatisticsDetail/${item.areas_id}/${item.id}`">-->
          <mt-cell
            @click.native.prevent="goSDetail(item.areas_id,item.VoteId,typeNum,page,item.scope_type,item.dong_id,item.yuan_id,item.type)">
            <span slot="icon" class="overhidden mint-cell-label">{{item.title}}</span>
            <span slot="icon" class="mint-cell-label">小区名称：{{item.areasName}}</span>
            <span slot="icon" class="mint-cell-label">截止时间：{{item.end_time*1000 | dateFmt('YYYY-MM-DD HH:ss')}}</span>
          </mt-cell>
        </div>
        <!--老版布局代码-->
        <!--<div class="tou-song-hui">
          <div class="tou"
               @click="$router.push(`/my/AlreadyVote/${item.areas_id}/${item.VoteId}/${item.areasName}/${page}`)">
            <span>已投票</span>
          </div>
          <div class="song"
               @click="$router.push(`/my/AlreadySendVote/${item.areas_id}/${item.VoteId}/${item.areasName}/${page}`)">
            <span>已送票</span></div>
          <div class="hui"
               @click="$router.push(`/my/AlreadyRecycle/${item.areas_id}/${item.VoteId}/${item.areasName}/${page}`)">
            <span>已回收</span></div>
        </div>-->
        <!--新版布局代码-->
        <div class="check_voted">
          <div class="view_button" @click="$router.push(`/my/AlreadyVote/${item.areas_id}/${item.VoteId}/${item.areasName}/${page}/${item.type}`)">
            <!--<img src="./images/viewicon.png" alt="">-->
            <span>已投票详情</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  import headTop from '../header/Header.vue'
  import { getVoteList } from '../../api/toupiaotongji.js'
  import { Toast } from 'mint-ui'

  export default {
    name: 'Statistics',
    data () {
      return {
        staListData: [],
        status: {
          type: Number
        },
        isFirstEnter: false,
        errMessage: '',
        code: {
          type: Number
        },
        typeNum: {
          type: Number
        },
        page: 'statistics'
      }
    },
    components: {
      headTop
    },
    created () {
      this.isFirstEnter = true
      this._getVoteList()
    },
    // 设置缓存从哪个页面返回
    beforeRouteEnter: (to, from, next) => {
      if (from.name === 'StatisticsDetail' || from.name === 'AlreadyVote' || from.name === 'AlreadySendVote' || from.name === 'AlreadyRecycle') {
        to.meta.isBack = true
      }
      next()
    },
    activated () {
      if (!this.$route.meta.isBack || this.isFirstEnter) {
        this._getVoteList()
      }
      this.$route.meta.isBack = false
      this.isFirstEnter = false
    },
    methods: {
      // 投票列表
      _getVoteList () {
        getVoteList().then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.status = res.data.status
            this.typeNum = res.data.type
            this.staListData = res.data.vote
            // console.log(this.staListData)
          }
          if (res.code === 400) {
            this.status = res.error.status
            this.code = res.code
            this.errMessage = res.error.message
          }
        })
      },
      goSDetail (aid, id, type, page, stype, did, yid, newold) {
        // console.log(id)
        if (type === '2') {
          this.$router.push('/my/StatisticsDetail/' + aid + '/' + id + '/' + page + '/' + stype + '/' + did + '/' + yid + '/' + newold)
        } else {
          Toast({
            message: '无权进行房屋操作，只能查看！',
            position: 'middle',
            duration: 1500
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../common/sass/mixin.scss';

  .statistics {
    padding-top: 80px;
    width: 100%;
    .list {
      width: 100%;
      border-bottom: 10px solid #f2f2f2;
      .line {
        margin: 0 10px;
      }
      .overhidden {
        @include ellipsis(1);
        line-height: 22px;
        text-decoration: underline;
      }
      &:last-child {
        border-bottom: none
      }
    }
    .tou-song-hui {
      width: 100%;
      display: inline-flex;
      /*justify-content: space-around;*/
      color: #0078de;
      .tou, .song, .hui {
        width: 33%;
        display: inline;
        text-align: center;
        height: 40px;
        line-height: 40px;
        span {
          padding: 5px 15px;
          border: 1px solid #f2f2f2;
          border-radius: 3px;
        }
      }
    }
    .check_voted{
      width: 100%;
      display: inline-flex;
      justify-content: center;
      padding: 10px 0;
      .view_button{
        width: 80%;
        height: 30px;
        line-height: 30px;
        background: #fff;
        padding: 0 20px;
        border-radius: 25px;
        text-align: center;
        border: 1px solid #c2c2c2;
        span {
          color: #0078de;
          letter-spacing: 2px;
        }
      }
    }
    .mint-cell {
      min-height: 70px;
      &:first-child {
        .mint-cell-wrapper {
          background-origin: content-box;
        }
      }
      .mint-cell-wrapper {
        background-size: 100% 0;
        padding: 0;
        margin-bottom: 10px;
      }
      .mint-cell-allow-right::after {
        right: 2px;
      }
    }
    .mint-cell-label {
      margin-top: 0;
      font-size: 14px;
      &:nth-of-type(3) {
        margin-bottom: 6px;
        color: #666;
      }
      &:nth-of-type(2) {
        margin: 6px 0;
        color: #666;
      }
      &:first-child {
        padding: 6px 0 0 0;
        color: rgb(0, 120, 222);
        font-size: 16px;
      }
    }
    .mint-cell-text {
      font-size: 12px;
      color: #666;
    }
  }
</style>
